<template>
    <div class="start">
        <Title :msg="msg" />
        <div class="link-open-window" @click="openWinHandler">文档</div>
        <div class="link-open-window" @click="getDateHandler">点击请求数据</div>
        <div class="titles">配置</div>
        <div class="img-list">
            <img class="img" src="@/assets/code/http-config.png" alt="">
        </div>
        <div class="titles">代码</div>
        <div class="img-list">
            <img class="img" src="@/assets/code/http-code.png" alt="">
        </div>
        <el-button type="primary" @click="prevHandler" class="  prev-btn">返回</el-button>
        <el-button type="primary" @click="nextHandler" class="next-btn">下一页</el-button>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Title from '@/components/Title.vue'
import { fetch } from '@tauri-apps/api/http';
import { WebviewWindow } from '@tauri-apps/api/window';

const getDateHandler = async () => {
    console.log('getDateHandler')
    const res = await fetch('https://yitutest.synjones.club/api/h5/v1/spus?current_page=1&page_size=10', {
        method: 'GET',
    })
    console.log(res)
}
const router = useRouter()
const msg = ref<string>('HTTP API')
const openWinHandler = () => {
    const window = new WebviewWindow('inovke-page', {
        url: "https://tauri.app/zh-cn/v1/api/js/http",
        width: 1200,
        height: 800
    })
    window.once('tauri://created', () => {
        console.log('created');
    })
    window.once('tauri://error', (e) => {
        console.log('error', e);
    })
}
const nextHandler = () => {
    router.push({ path: '/window' })
}
const prevHandler = () => {
    router.go(-1)
}

</script>
<style lang='less' scoped>
.start {
    width: 100%;
    height: 100vh;
    background: #fff;
    overflow: hidden;

    .next-btn {
        position: fixed;
        bottom: 20px;
        right: 20px;
    }

    .prev-btn {
        position: fixed;
        top: 20px;
        left: 20px;
    }

    .link-open-window {
        margin-left: 5%;
        font-size: 20px;
        font-weight: 600;
        color: #15bb09;
        cursor: pointer;
        text-decoration: underline;
    }

    .titles {
        width: 90%;
        font-size: 24px;
        margin: 20px auto;
        font-size: 18px;
        font-weight: 500;
    }

    .img-list {
        font-size: 24px;
        margin: 20px auto;
        display: flex;
        width: 90%;


        .img {
            width: 600px;
            margin-left: 10px;
        }
    }
}
</style>